import React, { memo } from 'react'
import { useDispatch } from "react-redux";
import chunk from "lodash/chunk";
import { getSongDetailAction } from "../../pages/play/store/actionCreator";
import { getSizeImage } from "@/utils/format-utils";
import { TopRankingWrapper } from "./style";

export default memo(function HjTopRanking(props) {
  // state/props
  const {info} =props

  // redux hook 
  const dispatch = useDispatch()
  // other handle
  const tracks =(props.info && chunk(props.info.tracks,10)[0])||[]  //要带着props不然又会报错

  // handle function
  const playMusic = item =>{
    console.log(item.id);
    dispatch(getSongDetailAction(item.id))
  }

  return (
    <TopRankingWrapper>
        <div className="header">
          <div className="header-img"> <img src={getSizeImage(info.coverImgUrl,80)} alt="" /></div>
          <div className="info">
            <h3 className="title">{info.name}</h3>
            <div >
              <button className="btn play sprite_02"></button>
              <button className="btn favor sprite_02"></button>
            </div>
          </div>
        </div>
        <div className="list">
          {
            tracks.map((item,index)=>{
              return (
                <div className="list-item" key={item.id}>
                   <div className="rank">{index+1}</div>
                   <div className="info">
                    <a href="/#" className="name">{item.name} </a>
                    <div className="operate">
                      <button className="btn sprite_02 play"  onClick={e=>playMusic(item)}></button>
                      <button className="btn sprite_icon2 addto"></button>
                      <button className="btn sprite_02 favor"></button>
                    </div>
                 </div>
                </div>
              )
            })
          }
        </div>
        <div className="footer"><a href="/#">查看全部 &gt;</a></div>
    </TopRankingWrapper>
  )
})
